<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <!--bootstrap-select  css文件-->
    <link rel="stylesheet" type="text/css" href="js/bootstrapselect/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="js/bootstrapselect/css/bootstrap-select.css"/>
    <!--日期  css文件-->
    <link rel="stylesheet" type="text/css" href="js/datepicker/css/bootstrap-datepicker.css">
    <!--弹窗 css文件-->
    <link rel="stylesheet" type="text/css" href="js/layer/layer.css">
    <!--图片点击放大  css文件-->
    <link rel="stylesheet" href="js/viewer/css/viewer.min.css">
    <!--主要css样式-->
    <link rel="stylesheet" type="text/css" href="css/models.css">
    <!--layui-->
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <style>
        .layui-upload-button {
            position: absolute;
            display: inline-block;
            vertical-align: middle;
            min-width: 60px;
            width: 60%;
            height: 42px;
            line-height: 42px;
            top: 0;
            left: 130px;
            opacity: 0;
            overflow: hidden;
            background-color: #fff;
            color: #666;
            cursor: pointer;
        }

        .ph_wareBox .ph_wareList tr th input[type="text"], .ph_wareBox .ph_wareList tr td input[type="text"] {
            border: none;
            width: 90%;
            height: 30px;
        }

        input.chkfalse {
            background: none !important;
        }

        input.chkfalse:focus {
            border: 1px solid #10c8ef !important;
            background: #ffffff !important;
        }
    </style>
</head>
<body>
<div class="MainContent">
    <!--主体内容-->
    <div class="MainCont">
        <div class="ph_snbBtn">
            <button class="columnBtn" name="" value="导出">导出</button>
            <button class="columnBtn js_addLabour" name="" value="添加商品">添加商品</button>
            <button class="columnBtn js_import" name="" value="批量导入">批量导入</button>
            <!--<button class="columnBtn" name="" value="冻结">冻结</button>
            <button class="columnBtn" name="" value="解冻">解冻</button>
            <button class="columnBtn" name="" value="升为猎头">升为猎头</button>
            <button class="columnBtn" name="" value="重置密码">重置密码</button>-->
        </div>
        <!--筛选条件-->
        <div class="ph_screen">
            <table class="ph_tableBox">
                <tr>
                    <th>店铺分类：</th>
                    <td>
                        <select class="selectpicker">
                            <option value="">全部</option>
                            <option value="">冻结</option>
                            <option value="">正常</option>
                        </select>
                    </td>
                    <th>商品状态：</th>
                    <td>
                        <select class="selectpicker">
                            <option value="">全部</option>
                            <option value="">冻结</option>
                            <option value="">正常</option>
                        </select>
                    </td>
                    <th>审核状态：</th>
                    <td>
                        <select class="selectpicker">
                            <option value="">全部</option>
                            <option value="">冻结</option>
                            <option value="">正常</option>
                        </select>
                    </td>
                    <th>商品名称：</th>
                    <td><input name="" type="text"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input name="" type="button" value="查询"><input name="" type="button" value="重置">
                    </td>
                </tr>
            </table>
        </div>
        <!--end 筛选条件-->
        <!--商品列表-->
        <div class="ph_wareBox ph_tabScroll">
            <form action="" id="formID">
                <table class="ph_wareList" id="example"></table>

            </form>
        </div>
        <!--end 商品列表-->
    </div>
    <!--end 主体内容-->
</div>
<!--批量导入-->
<div class="PopupBox" id="js_importBox">
    <!--内容-->
    <div class="ph_subPoCon">
        <form id="formID_three">
            <ul class="addList">
                <li>
                    <label for="">选择文件：</label>
                    <input class="memberTxt fileTxt ph_disabled" id="fileTxt" name="" type="text" disabled="disabled"
                           placeholder="请选择文件">
                    <input class="fileImport" id="fileExl" name="" type="file" accept=".xls,.xlsx">
                </li>
                <li>
                    <a class="DownloadTxt" href="#">模版下载</a>
                </li>
            </ul>
        </form>
    </div>
    <!--end 内容-->
</div>
<!--end 批量导入-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--bootstrap-select-->
<script type="text/javascript" src="js/bootstrapselect/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapselect/bootstrap-select.js"></script>
<script type="text/javascript" src="js/bootstrapselect/select.js"></script>
<!--日期控件-->
<script type="text/javascript" src="js/datepicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/datepicker/jquery.timepicker.js"></script>
<script type="text/javascript" src="js/datepicker/jquery.datepair.js"></script>
<script type="text/javascript" src="js/datepicker/datepicker.js"></script>
<!--验证-->
<script type="text/javascript" src="js/validat/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="js/validat/jquery.validationEngine.js"></script>
<!--分页-->
<script type="text/javascript" src="js/pages/jquery.dataTables.min.js"></script>
<!--弹窗-->
<script type="text/javascript" src="js/layer/layer.js"></script>
<!--layui-->
<script type="text/javascript" src="js/layui/layui.js"></script>
<script type="text/javascript">
    var upload;
    var layer;
    $(function () {
        layui.use(['layer', 'upload'], function () {
            layer = layui.layer;
            upload = layui.upload;
            var url = '/web/memberCard/importMemberCard';
            var index;
            upload({
                url: url,
                elem: '#fileExl',
                ext: 'xls|xlsx',
                title: '导入会员卡excel',
                type: 'file',
                before: function () {
                    $('#fileTxt').val($('#fileExl').val());
                    index = layer.msg('导入中...', {time: 0});
                },
                success: function (data) { //上传成功后的回调
                    if (data.code == 200) {
                        layer.close(index);
                        layer.alert("成功导入：" + data.data.successNum + "条，失败 ：" + data.data.errorNum);
                    } else {
                        layer.msg(data.message);
                    }
                }
            });
        });
        $('.ph_snbBtn').on('click', '.js_addLabour', function () {
            var setFlag = true;//是否进行过店铺设置 默认为false 每次点击都获取下店铺设置的状态
            if (setFlag) {
                var index = layer.open({
                    type: 2,
                    title: '添加商品',
                    closeBtn: 1,
                    area: ['100%', '100%'],
                    //maxmin: true,
                    shade: 0,
                    //btn: ['返回'],
                    btnAlign: 'c',
                    content: 'jxf_add_commodity.html'
                });
                layer.full(index);
            } else {
                //未设置店铺设置提示
                layer.alert('您还未进行店铺设置，添加商品前需要先设置店铺，是否前往设置店铺？', {
                    title: '提示',
                    closeBtn: 1,
                    btn: ['前往', '取消'],
                    btnAlign: 'c',
                    btn1: function (index) {
                        layer.close(index);
                        var clickP = parent.clickPersonInfo('jxf_wholesale_shop_setup.html');
                        clickP();
                    },
                    btn2: function (index) {
                        layer.close(index);
                    }

                })
            }


        });
        $('#example').on('dblclick', 'tbody tr', function () {
            var index = layer.open({
                type: 2,
                title: '商品详情',
                closeBtn: 1,
                area: ['100%', '100%'],
                //maxmin: true,
                shade: 0,
                //btn: ['返回'],
                btnAlign: 'c',
                content: 'jxf_wholesale_shopdetails.html'
            });
            layer.full(index);
        });
        //批量导入
        $('.ph_snbBtn').on('click', '.js_import', function (e) {
            var setFlag = true;//是否进行过店铺设置 默认为false
            if (setFlag) {
                layer.open({
                    type: 1,
                    title: '批量导入',
                    closeBtn: 1,
                    area: ['460px', '240px'],
                    //maxmin: true,
                    btn: ['关闭'],
                    btnAlign: 'c',
                    content: $('#js_importBox')
                });
            } else {
                //未设置店铺设置提示
                layer.alert('您还未进行店铺设置，添加商品前需要先设置店铺，是否前往设置店铺？', {
                    title: '提示',
                    closeBtn: 1,
                    btn: ['前往', '取消'],
                    btnAlign: 'c',
                    btn1: function (index) {
                        layer.close(index);
                        var clickP = parent.clickPersonInfo('jxf_wholesale_shop_setup.html');
                        clickP();
                    },
                    btn2: function (index) {
                        layer.close(index);
                    }

                })
            }
        });
        //选择文件
        $('.addList').on('change', '.fileImport', function () {
            var fileUrl = $(this).val();
            if (fileUrl != '') {
                var reg = /^.*\.(?:xls|xlsx)$/i;    //文件名可以带空格
                if (!reg.test(fileUrl)) {   //校验不通过
                    alert("请上传excel格式的文件!");
                    return;
                }
            }
            $('.fileTxt').val(fileUrl);
        });
        //验证
        $("#formID_three").validationEngine({
            addPromptClass: 'formError-text',
            showArrow: false,
            promptPosition: 'bottomLeft:10 0'
        });

        //编辑商品
        $('.ph_wareBox').on('click', '.js_addLabour', function () {
            var index = layer.open({
                type: 2,
                title: '添加商品',
                closeBtn: 1,
                area: ['100%', '100%'],
                //maxmin: true,
                shade: 0,
                //btn: ['返回'],
                btnAlign: 'c',
                content: 'jxf_add_commodity.html'
            });
            layer.full(index);
        });
        $('#example').DataTable({
            "bServerSide": true,
            "sPaginationType": "full_numbers",
            //"bJQueryUI": true,
            "sDom": '<"">t<"F"ip>',
            "autoWidth": false,  //自适应宽度
            //"sAjaxSource": "${ctx}/api/user/list", //ajax调用接口
            //<div class="btn-group" style="text-align:left;"><button type="button" class="btn btn-info dropdown-toggle"data-toggle="dropdown">操作 <span class="caret"></span></button>
            "sAjaxSource": "data/arrays.txt", //ajax调用接口
            "aoColumnDefs": [{sDefaultContent: '', orderable: false, aTargets: ['_all']}],
            "aoColumns": [
                /*{ "sWidth": "30px","sTitle" : "<input class= \"check-all\" name=\"\" type=\"checkbox\">", "mData": "id","mRender": function(){
                    return '<input class="ids" name="" type="checkbox">';
                }},*/
                {"sWidth": "50px", "sTitle": "编号", "mData": "id"},
                {"sTitle": "商品名称", "mData": "id1"},
                {"sTitle": "店铺分类", "mData": "id2"},
                {
                    "sTitle": "单价", "mData": "id3", "mRender": function () {
                        return '<input type="text" class="chkfalse" onblur="chkPrice(this)">'; //默认颜色就不用加样式名
                        //return '<span class="gray">未上架</span>';  //gray 灰色
                    }
                },
                {"sTitle": "单位", "mData": "id3"},
                {
                    "sTitle": "限购数量", "mData": "id3", "mRender": function () {
                        return '<input type="text" class="chkfalse" onblur="chkNumber(this)">'; //默认颜色就不用加样式名
                        //return '<span class="gray">未上架</span>';  //gray 灰色
                    }
                },
                {
                    "sTitle": "商品状态", "mData": "id5", "mRender": function () {
                        return '<span>已上架</span>'; //默认颜色就不用加样式名
                        //return '<span class="gray">未上架</span>';  //gray 灰色
                    }
                },
                {
                    "sTitle": "审核状态", "mData": "id5", "mRender": function () {
                        return '<span>已通过</span>'; //默认颜色就不用加样式名
                        //return '<span class="gray">待审核</span>';  //gray 灰色

                    }
                },
                {
                    "sWidth": "110px",
                    "sTitle": "操作",
                    "mData": "id",
                    "sClass": "ph_tableShow",
                    "mRender": function (data, type, full) {
                        var text = '<div class="operateBox"><input class="operate" name="" type="button" value="操作选项">';
                        text += '<ul class="operateList hide" role="menu">';
                        text += '<li><a class="js_Frozen" href="javascript:void(0);">上架</a></li>';
                        text += '<li><a class="Js_Enable" href="javascript:void(0);">下架</a></li>';
                        text += '<li><a class="js_addLabour" href="javascript:void(0);">编辑</a></li>';
                        text += '<li><a class="Js_delete" href="javascript:void(0);">删除</a></li>';
                        text += '</ul></div>';
                        return text;
                    }
                }
            ],
            "oLanguage": {
                "sProcessing": "数据加载中······",
                "sLengthMenu": "显示 _MENU_ 条记录",
                "sZeroRecords": "没有您要搜索的内容！",
                "sEmptyTable": "列表中无数据存在！",
                "sInfo": "当前显示 _START_ 到 _END_ 条数据，共 _TOTAL_ 条数据",
                "sInfoEmpty": "显示 0 到 0 条记录",
                "sInfoFiltered": "数据列表中共  _MAX_ 条记录",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                }
            }
            /*"fnServerData" : function ( sSource, aoData, fnCallback, oSettings ) {
               oSettings.jqXHR = $.ajax( {
                   "dataType" 	: 'json',
                   "type" 		: "GET",
                   "async"     : 'false',
                   "url" 		: sSource,
                   "data" 		: {
                       'pageNum': (aoData[3].value/aoData[4].value)+1,
                       'pageSize' :  aoData[4].value,
                       'telphone'  :  $("#telphone").val(),
                       'isable' : $('#isable').val()
                   },
                   "success"	: fnCallback
               } );
           }*/
        });
    });
    function chkPrice(obj) {
        var onlyPrice = /(?!^0*(\.0{1,2})?$)^\d{1,13}(\.\d{1,2})?$/;
        var inputZ=obj.value;
        if(inputZ!=''){
            console.log(inputZ);
            if(!onlyPrice.test(inputZ)){
                layer.alert('单价只能输入非负数，小数点后最多保留2位，请重新输入', {icon: 2,btnAlign: 'c', closeBtn : 0});
                obj.value='';
                obj.focus();
            }
        }

    }
    function chkNumber(obj) {
        var onlyNum=/^[0-9\ ]+$/;
        var inputVal=obj.value;
        if(inputVal!=''){
            if(!onlyNum.test(inputVal)){
                layer.alert('限购数量只能输入整数，请重新输入', {icon: 2,btnAlign: 'c', closeBtn : 0});
                obj.value='';
                obj.focus();
            }
        }

    }
</script>
</body>
</html>